<template>
  <!-- 搜索框 -->
  <el-card class="box-block">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-input
        v-model="input1"
        class="box1-input"
        placeholder="模糊查询单元名称、楼栋名称"
        prefix-icon="el-icon-search"
      />
      <!-- 选择框 -->
      <el-select v-model="region" class="box-input" placeholder="请选择社区" @change="changeValue">
        <el-option
          v-for="task in taskList"
          :key="task.communityId"
          :label="task.communityName"
          :value="task.communityId"
        />
      </el-select>
      <!-- 楼栋选择 -->
      <el-select v-model="formInline.region2" class="box-input" placeholder="请选择小区">
        <el-option
          v-for="task in unitList"
          :key="task.buildingId"
          :label="task.buildingName"
          :value="task.buildingId"
        />
      </el-select>
      <!-- 按钮 -->
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-button type="primary" @click="showlouceng=true">新增单元</el-button>
      <el-button type="danger">批量删除</el-button>
      <el-button type="success">批量导出</el-button>
    </el-form>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="40"
      />
      <el-table-column
        prop="communityName"
        label="小区名称"
        align="center"
        width="380"
      />
      <el-table-column
        prop="buildingName"
        label="楼栋名称"
        align="center"
        width="380"
      />
      <el-table-column
        prop="unitName"
        label="单元名称"
        align="center"
        width="380"
        show-overflow-tooltip
      />
      <el-table-column label="操作" align="center" width="380">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 页面 -->
    <el-row type="flex" justify="center" style="height: 50px" align="middle">
      <el-pagination
        background
        :current-page="page.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="changePage"
      />
    </el-row>
    <louceng-form :show-dialog.sync="showlouceng" />
  </el-card>
</template>

<script>
import loucengForm from './louceng-form.vue'
import { getunit, getbuildingName } from '@/api/paopao/unit'
import { getcommunityName } from '@/api/paopao/position'
export default {
  components: {
    loucengForm
  },
  data() {
    return {
      showlouceng: false, // 弹出层
      input1: '', // 搜索框
      region: '',
      taskList: [], // 下拉框数据
      unitList: [], // 二级下拉框
      formInline: {
        communityId: '',
        communityName: '',
        region2: ''
      }, // 选择框
      page: {
      // 放置页面相关数据
        page: 1,
        pagesize: 10,
        total: 50 // 记录总数
      },
      tableData: [{
        communityName: '', // 小区名称
        buildingName: '', // 楼栋名称
        unitName: '' // 单元名称
      }],
      multipleSelection: []
    }
  },
  created() {
    this.getunit()
    this.getcommunityName()
  },
  methods: {
    async getunit() {
      this.tableData = await getunit({
        pageIndex: 1, pageSize: 10
      })
    },
    // 获取下拉框的数据
    async changeValue(id) {
      // console.log(this.unitId)
      this.unitList = await getbuildingName({ id: id })
    },
    async getcommunityName() {
      this.taskList = await getcommunityName()
    },
    handleEdit() {
      this.showxingzen = true
      console.log('修改')
    },
    handleDelete() {
      console.log('删除')
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    changePage(newPage) {
      this.page.page = newPage
      this.getSalarysList()
    }
  }
}
</script>

<style>
.box-block{
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.box1-input{
    margin: 20px;
    width: 250px;
}
.box-input{
    margin: 20px;
    width: 150px;
}
</style>
